import React, { useState, useEffect } from "react";
import "./Monitor.css";
let timer;
let previewTimer;
export function Monitor(props) {
  const { pages, currentPage, setCurrentPage } = props;
  const [show, setShow] = useState(false);
  const [preview, setPreview] = useState(-1);
  useEffect(() => {
    if (currentPage === 0) {
      return;
    }
    clearTimeout(timer);
    setShow(true);
    timer = setTimeout(() => {
      setShow(false);
    }, 2000);
  }, [currentPage]);
  return (
    <>
      <div className="monitor" style={{ opacity: show ? 1 : 0 }}>
        {Array.from(pages, (Page, index) => {
          return (
            <div
              className="item"
              key={index}
              onClick={() => {
                setCurrentPage(index);
              }}
              onMouseEnter={() => {
                clearTimeout(previewTimer);
                setPreview(index);
                previewTimer = setTimeout(() => {
                  setPreview(-1);
                }, 2000);
              }}
              style={
                index === currentPage
                  ? {
                      background: "#434343",
                      transition: "none",
                    }
                  : {}
              }
            />
          );
        })}
      </div>
      <div className="previewer-cover">
        {pages.map((Page, index) => {
          if (preview === index)
            return (
              <div
                key={index}
                className="item"
                style={{ transform: `scale(${120 / window.innerHeight})` }}
              >
                <Page></Page>
              </div>
            );
          return null;
        })}
      </div>
    </>
  );
}
